<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>大数据可视化</title>
    <script type="text/javascript" th:src="@{js/jquery.js}" charset="utf-8" ></script>
    <link rel="stylesheet" th:href="@{css/comon0.css}">
</head>
<script type="text/javascript">
    $(document).ready(function () {
        var html = $(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls = $(".wrap li").length / 2 + 1
        i = 0
        ref = setInterval(function () {
            i++
            if (i == ls) {
                i = 1
                $(".wrap ul").css({marginTop: 0})
                $(".wrap ul").animate({marginTop: -'.52' * i + 'rem'}, 1000)
            }
            $(".wrap ul").animate({marginTop: -'.52' * i + 'rem'}, 1000)


        }, 2400);


        var html2 = $(".adduser ul").html()
        $(".adduser ul").append(html2)
        var ls2 = $(".adduser li").length / 2 + 1
        a = 0
        ref = setInterval(function () {
            a++
            if (a == ls2) {
                a = 1
                $(".adduser ul").css({marginTop: 0})
                $(".adduser ul").animate({marginTop: -'.5' * a + 'rem'}, 800)
            }
            $(".adduser ul").animate({marginTop: -'.5' * a + 'rem'}, 800)


        }, 4300);


    })
</script>
<body>
<div class="loading">
    <div class="loadbox"><img th:src="@{images/loading.gif}"> 页面加载中...</div>
</div>
<div class="head">
    <h1><img th:src="@{images/logo.png}">后台数据展示</h1>
    <div class="weather"><img th:src="@{images/weather.png}"><span id="displayDateTime"></span></div>
</div>
<script>
    var today = new Date();
    var day = today.getDay();
    var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var dateTime = date+' '+time;
    document.getElementById("displayDateTime").innerHTML = dateTime + ' <br> Day :- ' + daylist[day];
</script>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 2.7rem">
                <div class="alltitle">生意参谋</div>

                <div class="sycm">
                    <ul class="clearfix">
                        <li><h2 id="toding">1824</h2><span>订单量</span></li>
                        <li><h2 id="xiaofei">1824</h2><span>消费额</span></li>
                    </ul>
                    <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 2.65rem">
                <div class="alltitle">用户占比</div>
                <div class="sy" id="echarts1"></div>
                <div class="sy" id="echarts2"></div>
                <div class="sy" id="echarts3"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 2.95rem">
                <div class="alltitle">商品分类列表</div>
                <div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="map">
                <div class="map1"><img th:src="@{images/lbx.png}"></div>
                <div class="map2"><img th:src="@{images/jt.png}"></div>
                <div class="map3"><img th:src="@{images/map.png}"></div>
                <div class="map4" id="map_1"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:5.2rem">
                <div class="alltitle">用户信息</div>
                <div class="tabs">
                </div>
                <div class="addnew">
                    <div class="tit02"><span>用户列表</span></div>
                    <div class="adduser">
                        <ul class="clearfix"  th:each="user:${userList}">
                            <li class="clearfix"><span class="pulll_left"><img th:src="@{images/head.jpg}">新增会员列表</span>
                                <span class="pulll_right">[[${user.userAccount+"-----"+user.userName+"-----"+user.userSex}]]</span></li>
                        </ul>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.4rem">
                <div class="alltitle">消费记录</div>
                <div class="wrap">
                    <ul th:each="order:${orderList}">
                        <li>
                            <p>[[${order.orderNo+"----"+order.paymentType+"----"+order.orderPrice+"----"}]]</p>
                        </li>
                    </ul>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>

</div>
<div class="back"></div>
<script language="JavaScript" th:src="@{js/js.js}"></script>
<script type="text/javascript" th:src="@{js/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{js/china.js}"></script>
<script type="text/javascript" th:src="@{js/area_echarts.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
    })
    window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
    });
</script>
<script type="text/javascript">
    window.onload=function (){

    }
    var myChart1 = echarts.init(document.getElementById('echarts1'));
    var v1 = 298;
    var v2 = 523;
    var v3 = v1 + v2;
    option1 = {
        series: [{
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#0088cc',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v1,
                name: '总用户',
                label: {
                    normal: {
                        formatter: v3 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            },
            ]
        }]
    };
    var myChart3 = echarts.init(document.getElementById('echarts3'));
    var v1 = 298
    var v2 = 523
    var v3 = v1 + v2
    option2 = {
        series: [{
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#fccb00',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v1,
                name: '男性用户',
                label: {
                    normal: {
                        formatter: v1 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: v2,
                name: '女性用户',
                label: {
                    normal: {
                        formatter: function (params) {
                            return '占比' + Math.round(v1 / v3 * 100) + '%'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
    var myChart2 = echarts.init(document.getElementById('echarts2'));
    option3 = {
        series: [{
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#62b62f',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v2,
                name: '男性用户',
                label: {
                    normal: {
                        formatter: v2 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: v1,
                name: '女性用户',
                label: {
                    normal: {
                        formatter: function (params) {
                            return '占比' + Math.round(v2 / v3 * 100) + '%'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
    setTimeout(function () {
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    }, 500);
</script>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('echarts4'));
    var datalist = [{
        offset: [56, 48],
        symbolSize: 110,
        color: 'rgba(73,188,247,.14)',
    }, {
        offset: [30, 70],
        symbolSize: 70,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [0, 43],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [93, 30],
        symbolSize: 70,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [26, 19],
        symbolSize: 65,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [75, 75],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [75, 40],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'
    }
    ];
    var plantCap=[];
    window.onload = function () {
        // 商品分类请求
        $.ajax({
            url:"/category/list",
            success:function (resp){
                plantCap=JSON.parse(resp).data;

                var datas = [];
                for (var i = 0; i < plantCap.length; i++) {
                    var item = plantCap[i];
                    var itemToStyle = datalist[i];
                    datas.push({
                        name: item.categoryId + '\n' + item.categoryName,
                        value: itemToStyle.offset,
                        symbolSize: itemToStyle.symbolSize,
                        label: {
                            normal: {
                                textStyle: {
                                    fontSize: 14
                                }
                            }
                        },

                        itemStyle: {
                            normal: {
                                color: itemToStyle.color,
                                opacity: itemToStyle.opacity
                            }
                        },
                    })
                    option = {
                        grid: {
                            show: false,
                            top: 10,
                            bottom: 10
                        },

                        xAxis: [{
                            gridIndex: 0,
                            type: 'value',
                            show: false,
                            min: 0,
                            max: 100,
                            nameLocation: 'middle',
                            nameGap: 5
                        }],

                        yAxis: [{
                            gridIndex: 0,
                            min: 0,
                            show: false,
                            max: 100,
                            nameLocation: 'middle',
                            nameGap: 30
                        }],
                        series: [{
                            type: 'scatter',
                            symbol: 'circle',
                            symbolSize: 120,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{b}',
                                    color: '#FFF',
                                    textStyle: {
                                        fontSize: '30'
                                    }
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F30'
                                }
                            },
                            data: datas
                        }]

                    };
                    myChart.setOption(option);
                }
            }
        })
        // 订单总数
        $.ajax({
            url:"/order/listcount",
            success:function (resp) {

                document.querySelector("#toding").innerHTML=JSON.parse(resp).data
            }
        })
        $.ajax({
            url:"/order/listPrice",
            success:function (resp) {
                console.log(JSON.parse(resp).data[0].orderPrice)
                document.querySelector("#xiaofei").innerHTML=JSON.parse(resp).data[0].orderPrice
            }
        })
    }
    $(document).ready(function () {
        myChart.resize();
    })
    window.addEventListener("resize", function () {
        myChart.resize();
    });
</script>
<script type="text/javascript" th:src="@{js/jquery.waypoints.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery.countup.min.js}"></script>
<script type="text/javascript">
    $('.counter').countUp();
</script>

</body>
</html>
